<template>
  <!--
  级别: 默写
  ---------
  重点:
    1. 配置路由时的位置(没有底栏,故为一级路由)
    2. 三个子组件的隐藏显示条件(两个变量控制三个组件(不能同时显示))
      |-1. 默认显示 搜索历史( search-history )
      |-2. 当搜索栏中有内容时( searchText ),显示模糊匹配( search-suggestion )
      |-3. 当触发搜索事件时( onSearch ),显示搜索结果( isResultShow )
      |-4. 当搜索栏获得焦点时( @focus ),显示模糊匹配(隐藏搜索结果)( isResultShow = fasle )
    3. 作为中转站如何接收并处理数据,再传出
    4. 处理历史记录的数据(声明并添加( searchHistory ))
    5. 参数的传递 父传子 子传父 子传父传子
    6. 搜索历史记录数据持久化( watch (监视者) )
    7.
    8.
    9.
-->
  <div class="search-container">
    <!-- 顶部搜索栏 -->
    <form action="/">
      <van-search
        v-model="searchText"
        show-action
        placeholder="请输入搜索关键词"
        background="#3296fa"
        @search="onSearch"
        @cancel="onCancel"
        @focus="isResultShow = false"
      />
    </form>

    <!-- 搜索历史 -->
<!--     <search-history />

    <search-suggestion />

    <search-result /> -->

    <!-- 方式1 -->
    <!-- <search-result v-if="isResultShow"></search-result>
    <search-suggestion v-if="!isResultShow && searchText"></search-suggestion>
    <search-history v-if="!isResultShow && !searchText"></search-history> -->
    <!-- 方式2 -->
    <!-- <search-result v-if="isResultShow"></search-result>
    <template v-else>
        <search-suggestion v-if="searchText"></search-suggestion>
        <search-history v-if="!searchText"></search-history>
    </template> -->
    <!-- 方式3 -->
    <!-- <search-result v-if="isResultShow"></search-result>
    <template v-else>
        <search-suggestion v-if="searchText"></search-suggestion>
        <search-history v-else></search-history>
    </template> -->
    <!-- 方式4 -->
    <search-result v-if="isResultShow" :search-text="searchText"></search-result>
    <search-suggestion :search-text="searchText" v-else-if="searchText" @search="onSearch"></search-suggestion>
    <search-history v-else :search-history="searchHistory" @search="onSearch" @clear-search-history="searchHistory = []"></search-history>

  </div>
</template>

<script>
import SearchHistory from './components/search-history'
import SearchResult from './components/search-result'
import SearchSuggestion from './components/search-suggestion'
import { getItem, setItem } from '@/utils/storages'
export default {
  name: 'SearchIndex',
  components: {
    SearchHistory,
    SearchResult,
    SearchSuggestion

  },
  data () {
    return {
      searchText: '',
      isResultShow: false,
      // 当用户第一次使用时,本地存储中没有东西( 会返回 null ), null在遍历的过程中会报错( 所以当没有数据时直接返回一个空数组 )
      searchHistory: getItem('TOUTIAO_SEARCH_HISTORY') || []
    }
  },
  created () {

  },
  watch: {
    searchHistory (val) {
      setItem('TOUTIAO_SEARCH_HISTORY', val)
    }
  },
  methods: {
    onSearch (val) {
      // 更改搜索框中的内容
      this.searchText = val
      // 添加历史记录
      /*
        1.将搜索内容添加到数组的前面
        2.避免重复,查找数组中是否已存在搜索项
        3.如果存在,就将数组改数组项删除
      */
      // 2
      const index = this.searchHistory.indexOf(val)
      // 3
      if (index !== -1) {
        this.searchHistory.splice(index, 1)
      }
      // 1
      this.searchHistory.unshift(val)
      // 渲染搜索结果
      this.isResultShow = true
    },
    onCancel () {
      this.$router.back()
    }
  }
}
</script>

<style lang="less" scoped>
.search-container{
  .van-search__action{
    color: #fff;
  }
}
</style>
